<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
        >
<body>
<ui:composition>
    <p:panel>
        <h2>Step 3
            <small>Invite your Friends and Guests</small>
        </h2>

        <div class="control-group">
            <label class="control-label">Invite Members and Guests</label>

            <div class="controls">
                <p:autoComplete id="memberAutocomplete"
                                minQueryLength="3"
                                value="#{createLearningEventModel.learningEventInvitationData.emailList}"
                                converter="#{memberDataInvitationAutocompleteConverter}"
                                completeMethod="#{learningEventCreateController.findMembers}"
                                var="member"
                                itemValue="#{member}"
                                itemLabel="#{member.fullName} - #{member.eMail}"
                                multiple="true">
                    <p:ajax event="itemSelect"
                            listener="#{learningEventCreateController.applySelectedMemberForInvitation}"/>
                </p:autoComplete>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label">Mail Message Preview</label>

            <div class="controls">
                <p:editor id="invitationCustomTextEditor" widgetVar="editor"
                          value="#{createLearningEventModel.learningEventInvitationData.customText}"/>

                <p>
                    <p:commandButton id="submitButton" value="Submit" update="invitationTextPreview"
                                     action="#{learningEventCreateController.updateDefaultInvitationText}"
                                     icon="ui-icon-disk"/>
                    <p:commandButton id="clearButton" value="Clear" update="invitationTextPreview"
                                     onclick="editor.clear()"
                                     action="#{learningEventCreateController.updateDefaultInvitationText}"
                                     icon="ui-icon-close"/>
                </p>

                <h2>Mail Preview</h2>

                <div class="hero-unit">
                    <h:outputText id="invitationTextPreview"
                                  value="#{createLearningEventModel.learningEventInvitationFixText}"
                                  escape="false"/>
                </div>
            </div>
        </div>
    </p:panel>
</ui:composition>
</body>
</html>
